<template>
  <div class="ting_detail">
    <div class="author_img">
      <img :src="info.coverImgUrl" alt="" />
    </div>
    <header class="tt_title">
      <div class="title">
        {{ info.title }}
      </div>
      <div class="txt">
        <div class="box">
          <div class="img">
            <img :src="info.authorAvatar" alt="" />
          </div>
          <div class="info">
            <div class="content">{{ info.authorNickName }}</div>
            <div class="count">
              <span class="reader"
                >阅读&nbsp;{{ info.pageView | getCount }}万</span
              >
              <span class="time">{{ info.releaseAt }}</span>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="com">
      <div class="tt_com_box" v-for="(item, i) in list" :key="i">
        <div class="tt_section" v-html="item.richIntro"></div>
        <ul class="track" v-if="item.tracks.length > 0">
          <li v-for="(ele, index) in item.tracks" :key="index">
            <a>
              <ting-track-item
                :id="ele.id"
                :title="ele.title"
                :duration="ele.duration"
                :img="ele.coverPath"
                :albumTitle="ele.albumTitle"
              ></ting-track-item>
            </a>
          </li>
        </ul>
        <ul class="track" v-if="item.albums.length > 0">
          <li v-for="(ele, index) in item.albums" :key="index">
            <a>
              <ting-album-item
                :id="ele.albumInfo.id"
                :title="ele.albumInfo.title"
                :statCountInfo="ele.statCountInfo"
                :img="ele.albumInfo.coverPath"
                :customTitle="ele.albumInfo.customTitle"
              ></ting-album-item>
            </a>
          </li>
        </ul>
      </div>
    </div>

    
    <my-footer></my-footer>
    <my-load v-if="isShow"></my-load>
  </div>
</template>

<script>
import { initTingDetailData } from "@/request/api.js";
import TingTrackItem from "@/views/ting/tingcomp/TingTrackItem.vue";
import TingAlbumItem from "@/views/ting/tingcomp/TingAlbumItem.vue";

export default {
  name: "TingDetail",
  data() {
    return {
      tingid: 0,
      list: [],
      info: {},
      isShow: false,
    };
  },
  components: {
    TingTrackItem,
    TingAlbumItem
  },
  created() {
    this.tingid = this.$route.params.id;
    this.initData();
  },
  methods: {
    async initData() {
      let flag = localStorage.getItem("flag");
      if (flag) {
        this.isShow = flag;
      }

      let { data: res } = await initTingDetailData(this.tingid);
      console.log("详情", res);
      this.list = res.data.datas;
      this.info = {
        authorNickName: res.data.authorNickName,
        title: res.data.title,
        authorAvatar: "https://imagev2.xmcdn.com/" + res.data.authorAvatar,
        coverImgUrl: "https://imagev2.xmcdn.com/" + res.data.coverImgUrl,
        coverPathSmall: "https://imagev2.xmcdn.com/" + res.data.coverPathSmall,
        pageView: res.data.pageView,
        releaseAt: res.data.releaseAt,
      };

      document.title =  this.info.title

      if (this.list.length > 0) {
        this.isShow = false;
        localStorage.setItem("flag", this.isShow);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ting_detail {
  .author_img {
    width: 100%;
    > img {
      width: 100%;
    }
  }

  .com {
    padding: 10px 20px;
    background-color: #f0f0f0;
    .tt_com_box {
      .tt_section {
        font-size: 16px;
        color: #836464;
        line-height: 30px;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        text-align: justify;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
      }

      .track {
        li {
          margin-top: 10px;
          a {
            display: block;
          }
        }
      }
    }
  }
  .tt_title {
    background-color: #f0f0f0;
    .title {
      padding: 18px 16px 0;
      font-size: 24px;

      font-weight: 700;
      overflow: hidden;
      display: -ms-flexbox;
      display: flex;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
    }

    .txt {
      padding: 15px 17px 0;
      .box {
        width: 100%;
        height: 58px;
        background-color: #fff;
        display: flex;
        margin-right: 10px;

        .img {
          width: 46px;
          height: 100%;
          text-align: center;
          line-height: 58px;
          > img {
            width: 22px;
            height: 22px;
            border-radius: 50%;
          }
        }

        .info {
          height: 100%;
          padding-top: 8px;
          width: 270px;
          .content {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #333;
            font-size: 14px;
          }
          .count {
            font-size: 12px;
            color: #999;
            .reader {
              margin-right: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
